<template>
    <div class="big_box">
        <div class="login_box">
            <div class="yuan">
                <div class="small-yuan">
                    <img src="../assets/logo.svg" alt="">
                </div>
            </div>
            <div class="from_box">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize"
                    status-icon>
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="ruleForm.password" show-password :prefix-icon="Lock" />
                    </el-form-item>
                    <el-form-item label-width="318px">
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            登录
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                        <el-button @click="aaa">取消1</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { LoginApi } from '@/untils/api'
import type { FormInstance, FormRules } from 'element-plus'
import * as _ from 'lodash'
import { User, Lock } from '@element-plus/icons-vue'
let router = useRouter()
interface RuleForm {
    username: string
    password: string
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    username: 'Hello',
    password: '',
})
// 判数据类型
const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 7, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 7, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})
// 登录
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            getLogin()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const getLogin = async () => {
    let res: any = await LoginApi(ruleForm)
    console.log(res);
    if (res.data.meta.status == 200) {

        ElMessage({
            message: res.data.meta.msg,
            type: 'success',
        })
        localStorage.setItem('data', JSON.stringify(res.data.data.token))
        router.push('/User')
    } else if (res.data.meta.status == 400) {
        ElMessage({
            message: res.data.meta.msg,
            type: 'warning',
        })
    }
}

let timer = null
const aaa = async() => {
    clearTimeout(timer)
    timer = setTimeout(() => {
        console.log(1);
    }, 2000)
}



// 取消登录
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style lang="scss" scoped>
.big_box {
    width: 100vw;
    height: 100vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;

    .login_box {
        width: 500px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
        position: relative;

        .yuan {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: orange;
            display: flex;
            justify-content: center;
            align-items: center;

            .small-yuan {
                width: 120px;
                height: 120px;
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 120px;
                    height: 120px;
                }
            }
        }

        .from_box {
            width: 450px;
            margin: 100px auto;
        }
    }
}
</style>